import 'package:flutter/material.dart';
import 'package:extended_image/extended_image.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:lottie/lottie.dart';

import './tap_opacity.dart';

class CacheImage extends StatefulWidget {
    final String url;
    final double? radius;
    final String? hero;
    final BoxFit? fit;
    final void Function()? onTap;
    const CacheImage({Key? key,required this.url,this.radius,this.hero,this.fit,this.onTap}) : super(key: key);

  @override
  _CacheImageState createState() => _CacheImageState();
}

class _CacheImageState extends State<CacheImage> with SingleTickerProviderStateMixin{
    late final AnimationController lottieController;

    @override
    void initState() {
        lottieController = AnimationController(vsync: this);
        super.initState();
    }

    @override
    void dispose() {
        lottieController.dispose();
        super.dispose();
    }

    @override
    Widget build(BuildContext context) {
        if(widget.hero!=null){
            return Hero(tag: widget.hero!, child: eventWidget());
        }
        return eventWidget();
    }

    Widget eventWidget(){
        if(widget.onTap!=null){
            return TapOpacity(
                onTap:widget.onTap,
                child: ClipRRect(
                    borderRadius: BorderRadius.circular(widget.radius??0),
                    child: imageWidget(),
                ),
            );
        }else{
            return ClipRRect(
                borderRadius: BorderRadius.circular(widget.radius??0),
                child: imageWidget(),
            );
        }
    }

    Widget imageWidget(){
        if(widget.url.contains("http")){
            return ExtendedImage.network(
                widget.url,
                fit: widget.fit??BoxFit.contain,
                loadStateChanged: buildState
            );
        }else{
            return ExtendedImage.file(
                File(widget.url),
                fit: widget.fit??BoxFit.contain,
                loadStateChanged: buildState
            );
        }

    }

    Widget? buildState(ExtendedImageState state){
        switch (state.extendedImageLoadState) {
            case LoadState.loading:
                return Center(
                    child: Lottie.asset(
                        'lib/assets/lottie/loading-1.json',
                        width: 40,
                        height: 40,
                        controller: lottieController,
                        onLoaded: (composition){
                            lottieController..duration = composition.duration..reset();
                            lottieController.repeat();
                        },
                    ),
                );
                break;
            case LoadState.completed:
                return null;
                break;
            case LoadState.failed:
                return GestureDetector(
                child: Stack(
                    fit: StackFit.expand,
                    children: <Widget>[
                        Column(
                            mainAxisAlignment:MainAxisAlignment.center,
                            children: [
                                Icon(Icons.error,color: Colors.grey),
                                Text("轻触重新加载",style: TextStyle(fontSize: 12.sp,color: Colors.grey),textAlign: TextAlign.center,),
                            ],
                        )
                    ],
                ),
                onTap: () {
                    state.reLoadImage();
                },
            );
            break;
        }
    }
}
